<template>
  <view class="container">
    <!-- 顶部选择栏 -->
    <view class="location-block" @click="selectLocation">
      <view class="grade">高三
        <image src="/static/alibaba_icon/down.svg" mode="widthFix" style="width:12px; height:12px;" />
      </view>
      <view class="city">福州市</view>
    </view>

    <!-- 选项卡选择器 -->
    <view class="tab-selector">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab', { active: activeTab === index }]"
        @click="setActiveTab(index, tab)"
      >
        {{ tab }}
      </view>
      <view class="slider" :style="sliderStyle"></view>
    </view>

    <!-- 搜索图标 -->
    <view class="search-icon" @click="search">
      <image src="/static/alibaba_icon/find.svg" mode="widthFix" style="width:30px; height:30px;" />
    </view>
	
	
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['全部', '免费', '付费'],
      activeTab: 0
    };
  },
  computed: {
    sliderStyle() {
      return {
        transform: `translateX(${this.activeTab * 100}%)`
      };
    }
  },
  methods: {
    selectLocation() {
      console.log('点击到选择地区和年级');
    },
    setActiveTab(index, tab) {
      this.activeTab = index;
      console.log('被点击的选项:', tab);
    },
    search() {
      console.log('搜索');
    }
  }
};
</script>

<style>
.container {
  padding: 10px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  padding:  0 5%;
}

.location-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  margin-right: 10px;
}

.grade {
  font-size: 14px;
  color: #333;
}

.city {
  font-size: 12px;
  color: #666;
}

.tab-selector {
  position: relative;
  display: flex;
  align-items: center;
  width: 50%;
  background-color: #f0f0f0;
  padding: 3px;
  border-radius: 0.6em;
}

.tab-selector .tab {
  flex: 1;
  text-align: center;
  padding: 5px 0;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1;
}

.tab-selector .tab.active {
  color: #fff;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 33.33%;
  height: 100%;
  background-color: #007bff;
  border-radius: 0.6em;
  transition: transform 0.3s ease;
}

.search-icon {
  cursor: pointer;
  font-size: 18px;
  color: #333;
}

</style>
